<template>
  <div
    v-cloak
    class="dind_box"
    v-infinite-scroll="singer_data_fn_scroll_fn"
    infinite-scroll-delay="5000"
  >
    <!-- infinite-scroll-immediate="false" -->
    <!-- 标签页  提交一下-->
    <div class="find_title">
      <el-tabs v-model="$store.state.activeName" @tab-click="handleClick">
        <!-- 精选区 -->
        <el-tab-pane label="个性推荐" name="personality">
          <div>
            <!-- 轮播图 -->
            <div class="banners">
              <el-carousel
                :autoplay="false"
                :interval="4000"
                type="card"
                height="300px"
              >
                <el-carousel-item
                  v-for="(item, index) in bannerImg"
                  :key="index"
                >
                  <img :src="item.imageUrl" />
                </el-carousel-item>
              </el-carousel>
            </div>
            <!-- 推荐歌单标题 -->
            <div class="caption">
              <span>推荐歌单</span><span class="el-icon-arrow-right"></span>
            </div>
            <!-- 推荐歌单的项 -->
            <div class="recommendation_items">
              <div
                @click="select_song(item.id)"
                class="item"
                v-for="(item, index) in data"
                :key="index"
              >
                <Recommendation :f1="item" />
              </div>
            </div>
            <!-- 独家放送标题 -->
            <div class="caption caption2">
              <span>独家放送</span><span class="el-icon-arrow-right"></span>
            </div>
            <!-- 独家放送的每一项 -->
            <div class="exclusive">
              <div
                class="item"
                v-for="(item, index) in exclusiveData"
                :key="index"
              >
                <Exclusive :item="item" />
              </div>
            </div>
            <!-- 最新音乐标题 -->
            <div class="caption caption2">
              <span>最新音乐</span><span class="el-icon-arrow-right"></span>
            </div>
            <!-- 最新音乐的每一项 -->
            <div class="new_music">
              <div
                class="item"
                v-for="(item, index) in new_muisc_data"
                @click="get_music_id(item)"
                :key="index"
              >
                <Newmusic :f1="item" />
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 歌单区 -->
        <el-tab-pane label="歌单" name="song">
          <!-- playlist(1) -->
          <div class="play_list_box">
            <div class="type">
              <div class="type_name">{{ select_select_play_list }}</div>
              <div class="type_icon el-icon-arrow-right"></div>
            </div>
            <div class="play_list">
              <div
                class="type_item"
                :class="play_list_hot_acitve === index ? 'active' : ''"
                @click="select_play_list(index, item.name)"
                v-for="(item, index) in play_list_hot"
                :key="index"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="play_list_content_box">
            <div
              class="play_list_item"
              v-for="(item, index) in items"
              :key="index"
              @click="select_song(item.id)"
            >
              <PlayListItem :item1="item" />
            </div>
          </div>
          <div class="fyq">
            <el-pagination
              :page-size="48"
              :pager-count="11"
              layout="prev, pager, next"
              :total="total_count"
              @current-change="playlist"
            >
            </el-pagination>
          </div>
        </el-tab-pane>

        <!-- 主播电台区 -->
        <el-tab-pane label="主播电台" name="anchor" class="anchor">
          <!-- 轮播图 -->
          <div class="banners">
            <el-carousel
              :autoplay="false"
              :interval="4000"
              type="card"
              height="300px"
            >
              <el-carousel-item
                v-for="(item2, index2) in anchor_banner"
                :key="index2"
              >
                <img :src="item2.pic" />
              </el-carousel-item>
            </el-carousel>
          </div>

          <!-- 电台分类 -->
          <div class="anchor_type">
            <div
              class="item"
              :class="
                $store.state.select_nchor_type === item.id ? 'active' : ''
              "
              @click="select_nchor_type_fn(item.id)"
              v-for="(item, index) in anchor_type"
              :key="index"
            >
              {{ item.name }}
            </div>
          </div>

          <!-- 电台展示区   展示一部分电台分类推荐的内容 -->
          <!-- 创作翻唱 -->
          <div class="title" @click="select_nchor_type_fn(2001)">
            <h2>创作翻唱</h2>
            <div class="el-icon-arrow-right"></div>
          </div>
          <div class="title_content">
            <div
              class="title_content_list"
              v-for="(item, index) in $store.state.select_nchor_type_title_data"
              :key="index"
              @click="select_acchor(item)"
            >
              <MuiseStory :itemdata="item" />
            </div>
          </div>
          <div class="title" @click="select_nchor_type_fn(2)">
            <h2>音乐推荐</h2>
            <div class="el-icon-arrow-right"></div>
          </div>
          <div class="title_content">
            <div
              class="title_content_list"
              v-for="(item, index) in $store.state.music_story_data"
              :key="index"
              @click="select_acchor(item)"
            >
              <MuiseStory :itemdata="item" />
            </div>
          </div>
          <div class="title" @click="select_nchor_type_fn(3001)">
            <h2>二次元</h2>
            <div class="el-icon-arrow-right"></div>
          </div>
          <div class="title_content">
            <div
              class="title_content_list"
              v-for="(item, index) in $store.state.voice_lover_data"
              :key="index"
              @click="select_acchor(item)"
            >
              <MuiseStory :itemdata="item" />
            </div>
          </div>
        </el-tab-pane>

        <!-- 排行版区 -->
        <el-tab-pane label="排行版" name="rank">
          <!-- 标题区 -->
          <div><h2>官方榜</h2></div>
          <!-- 飙升榜 -->
          <div class="bsb">
            <div
              class="img"
              @click="select_toplist($store.state.get_toplist_img)"
            >
              <img :src="$store.state.get_toplist_img.coverImgUrl" alt="" />
              <div
                class="play_icon"
                @click.stop="select_toplist($store.state.get_toplist_img, '1')"
              >
                <div class="el-icon-caret-right"></div>
              </div>
            </div>
            <div class="bsb_item">
              <div
                class="music_item"
                v-for="(item, index) in $store.state.get_toplist_music1"
                :key="index"
                @click="play_music(item)"
              >
                <div class="index" :class="index <= 2 ? 'active' : ''">
                  {{ index + 1 }}
                </div>
                <div class="name">
                  {{ item.name }} <span>{{ item.alia[0] }}</span>
                </div>
                <div class="man_name">
                  <span v-for="(item1, index1) in item.ar" :key="index1">{{
                    item1.name
                  }}</span>
                </div>
              </div>
              <div
                class="look"
                @click="select_toplist($store.state.get_toplist_img)"
              >
                查看全部 <span class="el-icon-arrow-right"></span>
              </div>
            </div>
          </div>
          <!--新歌榜 -->
          <div class="bsb">
            <div
              class="img"
              @click="select_toplist($store.state.get_toplist_img2)"
            >
              <img :src="$store.state.get_toplist_img2.coverImgUrl" alt="" />
              <div
                class="play_icon"
                @click.stop="select_toplist($store.state.get_toplist_img2, '1')"
              >
                <div class="el-icon-caret-right"></div>
              </div>
            </div>
            <div class="bsb_item">
              <div
                class="music_item"
                v-for="(item, index) in $store.state.get_toplist_music2"
                :key="index"
                @click="play_music(item)"
              >
                <div class="index" :class="index <= 2 ? 'active' : ''">
                  {{ index + 1 }}
                </div>
                <div class="name">
                  {{ item.name }} <span>{{ item.alia[0] }}</span>
                </div>
                <div class="man_name">
                  <span v-for="(item1, index1) in item.ar" :key="index1">{{
                    item1.name
                  }}</span>
                </div>
              </div>
              <div
                class="look"
                @click="select_toplist($store.state.get_toplist_img2)"
              >
                查看全部 <span class="el-icon-arrow-right"></span>
              </div>
            </div>
          </div>
          <!--原创榜 -->
          <div class="bsb">
            <div
              class="img"
              @click="select_toplist($store.state.get_toplist_img3)"
            >
              <img :src="$store.state.get_toplist_img3.coverImgUrl" alt="" />
              <div
                class="play_icon"
                @click.stop="select_toplist($store.state.get_toplist_img3, '1')"
              >
                <div class="el-icon-caret-right"></div>
              </div>
            </div>
            <div class="bsb_item">
              <div
                class="music_item"
                v-for="(item, index) in $store.state.get_toplist_music3"
                :key="index"
                @click="play_music(item)"
              >
                <div class="index" :class="index <= 2 ? 'active' : ''">
                  {{ index + 1 }}
                </div>
                <div class="name">
                  {{ item.name }} <span>{{ item.alia[0] }}</span>
                </div>
                <div class="man_name">
                  <span v-for="(item1, index1) in item.ar" :key="index1">{{
                    item1.name
                  }}</span>
                </div>
              </div>
              <div
                class="look"
                @click="select_toplist($store.state.get_toplist_img3)"
              >
                查看全部 <span class="el-icon-arrow-right"></span>
              </div>
            </div>
          </div>
          <!--热歌榜 -->
          <div class="bsb">
            <div
              class="img"
              @click="select_toplist($store.state.get_toplist_img4)"
            >
              <img :src="$store.state.get_toplist_img4.coverImgUrl" alt="" />
              <div
                class="play_icon"
                @click.stop="select_toplist($store.state.get_toplist_img4, '1')"
              >
                <div class="el-icon-caret-right"></div>
              </div>
            </div>
            <div class="bsb_item">
              <div
                class="music_item"
                v-for="(item, index) in $store.state.get_toplist_music4"
                :key="index"
                @click="play_music(item)"
              >
                <div class="index" :class="index <= 2 ? 'active' : ''">
                  {{ index + 1 }}
                </div>
                <div class="name">
                  {{ item.name }} <span>{{ item.alia[0] }}</span>
                </div>
                <div class="man_name">
                  <span v-for="(item1, index1) in item.ar" :key="index1">{{
                    item1.name
                  }}</span>
                </div>
              </div>
              <div
                class="look"
                @click="select_toplist($store.state.get_toplist_img4)"
              >
                查看全部 <span class="el-icon-arrow-right"></span>
              </div>
            </div>
          </div>

          <!-- 标题区 -->
          <div><h2>全球榜</h2></div>
          <div class="all_toplist">
            <div
              class="list"
              v-for="(item, index) in $store.state.all_toplist_data"
              :key="index"
              @click="select_toplist(item)"
            >
              <div class="img">
                <img :src="item.coverImgUrl" alt="" />
                <div class="play_count">
                  <div class="play_img">
                    <img src="../assets/images/play_count_icon.png" alt="" />
                  </div>
                  <div class="count">{{ item.playCount }}</div>
                </div>
                <div class="play_icon" @click.stop="select_toplist(item, '1')">
                  <div class="el-icon-caret-right"></div>
                </div>
              </div>
              <div class="list_name">{{ item.name }}</div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 歌手区 -->
        <el-tab-pane label="歌手" name="singer">
          <div>
            <!-- 语种  分类   筛选 -->
            <!-- 分类 -->
            <div class="Language_type">
              <div class="name">分类 :</div>
              <div class="language_type">
                <div
                  class="language_type_item"
                  @click="select_class_singer_fn(index, item.type)"
                  v-for="(item, index) in classification"
                  :key="index"
                >
                  <div
                    class="item"
                    :class="
                      $store.state.active_singers2 === index ? 'active' : ''
                    "
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
            <!-- 筛选 -->
            <div class="Language_type">
              <div class="name">筛选 :</div>
              <div class="language_type">
                <div
                  class="language_type_item"
                  v-for="(item, index) in screening"
                  @click="select_screening_singer_fn(index, item.name)"
                  :key="index"
                >
                  <div
                    class="item"
                    :class="
                      index === $store.state.active_singers3 ? 'active' : ''
                    "
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>

            <div v-if="loading">
              <el-table
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 1)"
                style="width: 100%; height: 300px"
              >
              </el-table>
            </div>

            <div class="singers" v-else>
              <div
                class="singer"
                v-for="(item, index) in $store.state.singer_data"
                :key="index"
                @click="gosingerDetails(item)"
                lazy
              >
                <div class="img">
                  <img :src="item.picUrl" alt="" />
                </div>
                <div class="wenzi">{{ item.name }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 最新音乐区 -->
        <el-tab-pane label="最新音乐" name="latest">
          <!-- 新歌速递 和 新碟上架的按钮 -->
          <div class="new_btn_wrapper">
            <div class="new_btn_box">
              <div
                v-for="(item, index) in zj_song"
                :key="index"
                :class="$store.state.album_songs === index ? 'active' : ''"
                @click="select_song_zj_fn(index)"
              >
                {{ item.title }}
              </div>
            </div>
          </div>

          <div class="new_btn_music_box" v-if="$store.state.album_songs === 0">
            <!-- tab选项 全部  华语  欧美  韩国  日本 全部播放的按钮-->
            <div class="btn_tag">
              <div class="tag">
                <div
                  @click="top_song_tab_data_fn(index, item.type)"
                  :class="
                    $store.state.select_top_song_tab === index ? 'active' : ''
                  "
                  v-for="(item, index) in top_song_tab"
                  :key="index"
                >
                  {{ item.title }}
                </div>
              </div>
              <div class="all_play_btn_box">
                <div class="all_play_btn" @click="play_all_music($store.state.top_song_new)">
                  <div class="img">
                    <img src="../assets/images/all_play_white.png" alt="" />
                  </div>
                  <div class="wenzi" cli>播放全部</div>
                </div>
              </div>
            </div>
            <!-- 音乐的每一项 -->
            <div class="all_new_music">
              <!-- 等待加载 -->
              <div v-if="loading">
                <el-table
                  class="loading"
                  v-loading="loading"
                  element-loading-text="拼命加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255, 255, 255, 1)"
                  style="width: 100%"
                >
                </el-table>
              </div>
              <!-- 加载完显示 -->
              <div
                v-else
                class="new_music_item"
                v-for="(item, index) in $store.state.top_song_new"
                :key="index"
                @click="play_top_song(item)"
              >
                <div class="index">{{ index + 1 }}</div>
                <div class="img">
                  <img :src="item.album.picUrl" alt="" />
                  <div class="play_btn">
                    <div class="el-icon-caret-right"></div>
                  </div>
                </div>
                <div class="music_name_box">
                  <span class="music_nama">{{ item.name }}</span>
                  <span class="music_alia" v-if="item.alias[0]">
                    ( {{ item.alias[0] }} )
                  </span>
                </div>
                <div class="singer_name">
                  <span v-for="(name, i) in item.artists" :key="i">{{
                    name.name
                  }}</span>
                </div>
                <div class="zj_name_box">
                  <span class="zj_name">{{ item.name }}</span>
                  <span class="zj_alia" v-if="item.alias[0]">
                    ( {{ item.alias[0] }} )
                  </span>
                </div>
                <div class="play_time">{{ item.bMusic.playTime }}</div>
              </div>
            </div>
          </div>

          <div class="new_btn_zj_box" v-if="$store.state.album_songs === 1">
            <!-- tab选项 全部  华语  欧美  韩国  日本 全部播放的按钮-->
            <div class="btn_tag">
              <div class="tag">
                <div
                  :class="
                    $store.state.select_top_song_tab === index ? 'active' : ''
                  "
                  v-for="(item, index) in top_song_tab"
                  :key="index"
                >
                  {{ item.title }}
                </div>
              </div>
            </div>

            <div v-if="loading1">
              <el-table
                class="loading"
                v-loading="loading1"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255, 255, 255, 1)"
                style="width: 100%"
              >
              </el-table>
            </div>

            <!-- 新碟内容区 -->
            <div class="content_box"  v-if="!loading1">
              <div class="content_sm_box">
                <div class="content_time">
                  <div class="wenzi">本周新碟</div>
                </div>
                <div class="content">
                  <div
                    class="content_item"
                    v-for="(item, index) in $store.state.week_album_songs"
                    :key="index"
                  >
                    <NewZj :f1="item" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Recommendation from "../components/Recommendation.vue";
import Exclusive from "../components/Exclusive.vue";
import New_music from "../components/New_music.vue";
import Play_list_item from "../components/Play_list_item.vue";
import AnchorItem from "../components/AnchorItem.vue";
import MuiseStory from "../components/MuiseStory.vue";
import NewZj from "../components/NewZj.vue";
export default {
  name: "Find_music",
  data() {
    return {
      // 用于singer的节流
      aa: 0,
      // 轮播图的图片
      bannerImg: {},
      // 精品推荐的数据
      data: [],
      // 独家放送的数据
      exclusiveData: [],
      // 最新音乐的数据
      new_muisc_data: [],
      // 歌单的子类型的  例如 获取
      play_list_hot: [],
      //用于切换子类型的高亮
      play_list_hot_acitve: 0,
      // 选中后的类型
      select_select_play_list: "华语",
      // 存放获取到的所有歌单
      items: [],
      // limit
      limit: 48,
      // 分页器的总数量
      total_count: 1,

      // 电台区的轮播图
      anchor_banner: [],
      // 电台区的分类
      anchor_type: [],

      // 分类
      classification: [
        { name: "华语男歌手", type: 1001 },
        { name: "华语女歌手", type: 1002 },
        { name: "华语组合", type: 1003 },
        { name: "欧美男歌手", type: 2001 },
        { name: "欧美女歌手", type: 2002 },
        { name: "欧美组合", type: 2003 },
        { name: "日本男歌手", type: 6001 },
        { name: "日本女歌手", type: 6002 },
        { name: "日本组合", type: 6003 },
        { name: "韩国男歌手", type: 7001 },
        { name: "韩国女歌手", type: 7002 },
        { name: "韩国组合", type: 7003 },
        { name: "其他男歌手", type: 4001 },
        { name: "其他女歌手", type: 4002 },
        { name: "其他组合", type: 4003 },
        { name: "入驻歌手", type: 5001 },
      ],

      screening: [
        { name: "全部" },
        { name: "A" },
        { name: "B" },
        { name: "C" },
        { name: "E" },
        { name: "F" },
        { name: "G" },
        { name: "H" },
        { name: "I" },
        { name: "J" },
        { name: "K" },
        { name: "L" },
        { name: "M" },
        { name: "N" },
        { name: "O" },
        { name: "P" },
        { name: "Q" },
        { name: "R" },
        { name: "S" },
        { name: "T" },
        { name: "U" },
        { name: "V" },
        { name: "W" },
        { name: "X" },
        { name: "Y" },
        { name: "Z" },
        { name: "#" },
      ],

      // =====================
      // 歌手区
      // 拿到数据后变为false
      loading: true,
      // 新碟上架的loading
      loading1:true,

      // 需要获取的数量
      limit_singer: 15,

      // 新歌速递  或者 新碟上架
      zj_song: [
        { title: "新歌速递", type: 0 },
        { title: "新碟上架", type: 1 },
      ],

      // 新歌速递的分类  全部  华语 欧美 日本  韩国
      top_song_tab: [
        { title: "全部", type: 0 },
        { title: "华语", type: 7 },
        { title: "欧美", type: 96 },
        { title: "日本", type: 8 },
        { title: "韩国", type: 16 },
      ],
      select_top_song_tab: 0,
    };
  },
  components: {
    // 精选推荐的组件
    Recommendation,
    // 独家放送的组件
    Exclusive,
    // 最新音乐的组件
    Newmusic: New_music,
    // 歌单子类型的 的每一项内容
    PlayListItem: Play_list_item,
    // 展示一小部分的电台的组件
    AnchorItem,
    // 音乐故事的组件
    MuiseStory,
    // 新碟上架的组件
    NewZj,
  },
  created() {
    console.log(this.activeName);
    // 调用轮播接口
    this.banner();

    // 调用精品推荐歌单接口
    this.recommendation();

    // 调用独家放送的接口
    this.exclusive();

    // // 调用获取最新音乐的接口
    this.new_music();
    // this.$store.state.new_music

    // 调用热门歌单类型   例如  华语 民谣等
    this.playlist_hot();

    // 调用切换用于切换子类型的高亮   例如  华语 民谣等 跟页面的内容
    this.select_play_list(0, "华语");

    // 调用歌单 ( 网友精选碟 )接口
    this.playlist(1);

    // 判断是否在电台页面
    if (this.$store.state.activeName === "anchor") {
      // 调用电台轮播方法
      this.anchor_banner_fn();
      // 调用电台分类方法
      this.anchor_type_fn();
      // 创作翻唱
      this.select_nchor_type_title_fn();
      // 音乐故事
      this.music_story_fn();
      // 声音恋人
      this.voice_lover_fn();
    }

    // 排行榜
    if (this.$store.state.activeName === "rank") {
      // 调用飙升榜的接口
      this.top_list_top();

      // 全球榜  获取所有榜单 接口:  /toplist
      this.all_toplist_data_fn();
    }

    // 歌手区
    if (this.$store.state.activeName === "singer") {
      
    }
  },

  mounted(){
    this.loading = false
    this.loading1 = false
  },

  methods: {
    // 切换标签
    handleClick(tab, event) {
      this.$store.commit("activeName", tab.name);
      console.log(tab);
      console.log(event);
      if (this.$store.state.activeName === "personality") {
        this.catlist();
        return;
      }
      if (this.$store.state.activeName === "anchor") {
        // 调用电台轮播方法
        this.anchor_banner_fn();
        // 调用电台分类方法
        this.anchor_type_fn();
        // 创作翻唱
        this.select_nchor_type_title_fn();
        // 音乐故事
        this.music_story_fn();
        // 声音恋人
        this.voice_lover_fn();
        return;
      }

      if (this.$store.state.activeName === "rank") {
        // 调用飙升榜的接口
        this.top_list_top();
        // 全球榜  获取所有榜单 接口:  /toplist
        this.all_toplist_data_fn();
        return;
      }

      // 歌手区
      if (this.$store.state.activeName === "singer" && this.aa === 0) {
        this.aa++;
        this.singer_data_fn_scroll_fn();
        return;
      }
      if (this.$store.state.activeName === "latest") {
        this.select_song_zj_fn();
      }
    },

    // 调用轮播接口
    banner() {
      this.axios({
        method: "get",
        url: "/banner",
        params: {
          type: "0",
          withCredentials: true,
        },
      })
        .then((res) => {
          console.log(res);
          this.bannerImg = res.data.banners;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 调用推荐歌单接口
    recommendation() {
      this.axios({
        method: "get",
        url: "/personalized",
        params: {
          limit: 10,
        },
      })
        .then((res) => {
          console.log("我是推荐歌单的接口1", res);
          for (let i = 0; i < res.data.result.length; i++) {
            let playCount = String(res.data.result[i].playCount);
            if (playCount.length > 4) {
              res.data.result[i].playCount =
                playCount.slice(0, playCount.length - 4) + "万";
            }
          }
          console.log("我是推荐歌单的接口2", res);
          console.log(res.data.result);

          this.data = res.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取独家放送的接口
    exclusive() {
      this.axios({
        method: "get",
        url: "/personalized/privatecontent",
      })
        .then((res) => {
          console.log(res);
          this.exclusiveData = res.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取最新音乐的接口
    new_music() {
      this.axios({
        method: "get",
        url: "/personalized/newsong",
        params: {
          limit: 12,
        },
      })
        .then((res) => {
          console.log("我是最新音乐", res);
          this.new_muisc_data = res.data.result;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取需要播放音乐的id
    get_music_id(item) {
      item.playTime = this.init_time(item.song.bMusic.playTime / 1000);
      // 将音乐的id传到vuex获取url路径
      this.$store.commit("src_id", item.id);
      // 将正要播放的音乐传都vuex
      this.$store.commit("musis_info", item);

      // 将正在播放的歌曲存进播放列表
      this.$store.commit("play_list", item);
      // 调用vuex里面的actions里面的额get_src方法 得到音乐的路径
      this.$store.dispatch("get_src");

      if (!this.$store.state.play_list.length <= 10) {
        this.$store.state.play_list.splice(
          this.$store.state.play_list_count,
          1
        );
        console.log(this.$store.state.play_list);
      }

      console.log("我是正在播放的音乐", this.$store.state.musis_info);
    },

    // 格式化时间
    init_time(times) {
      var t = "";
      if (times > -1) {
        var min = Math.floor(times / 60) % 60;
        var sec = times % 60;
        if (min < 10) {
          t += "0";
        }
        t += min + ":";
        if (sec < 10) {
          t += "0";
        }
        t += sec.toFixed(2);
      }
      t = t.substring(0, t.length - 3);
      return t;
    },

    // 热门歌单分类
    playlist_hot() {
      this.axios({
        method: "get",
        url: "/playlist/hot",
      })
        .then((res) => {
          console.log("我是热门歌单分类", res);
          this.play_list_hot = res.data.tags;
          console.log(this.play_list_hot);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 切换用于切换子类型的高亮   例如  华语 民谣等 跟页面的内容
    select_play_list(index, name) {
      this.play_list_hot_acitve = index;
      this.select_select_play_list = name;
      this.playlist(1);
    },

    // 获取歌单的接口
    playlist(e) {
      this.axios({
        method: "get",
        url: "/top/playlist",
        params: {
          cat: this.select_select_play_list,
          limit: this.limit,
          offset: (e - 1) * this.limit,
        },
      })
        .then((res) => {
          console.log("我来啦我来啊", res);
          this.items = res.data.playlists;
          this.total_count = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 歌单分类
    catlist() {
      this.axios({
        method: "get",
        url: "/playlist/catlist",
      })
        .then((res) => {
          console.log("我歌单分类", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 电台banner
    anchor_banner_fn() {
      this.axios({
        method: "get",
        url: "/dj/banner",
      })
        .then((res) => {
          console.log(res);
          this.anchor_banner = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 电台分类    "/dj/catelist"   电台推荐分类
    anchor_type_fn() {
      this.axios({
        method: "get",
        url: "/dj/catelist",
      })
        .then((res) => {
          console.log("我是电台分类", res);
          this.anchor_type = res.data.categories;
          console.log("this.anchor_type ", this.anchor_type);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 选择电台的分类  这里调用了 电台 - 分类推荐 /dj/recommend/type  接口
    // 这个方法还用来电台电台推荐部分
    select_nchor_type_fn(id) {
      // console.log(item);
      // console.log(item.id);

      this.$store.commit("select_nchor_type", id);
      this.axios({
        method: "get",
        url: "/dj/radio/hot",
        params: {
          // type:item.id
          cateId: id,
        },
      })
        .then((res) => {
          console.log(res);
          console.log("select_anchor_type_data", res.data.djRadios);
          this.$store.commit("select_anchor_type_data", res.data.djRadios);
          this.$router.push({ name: "SelectAnchorType" });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 创作翻唱
    select_nchor_type_title_fn() {
      this.axios({
        method: "get",
        url: "/dj/radio/hot",
        params: {
          limit: 5,
          cateId: 2001,
        },
      })
        .then((res) => {
          console.log("select_nchor_type_title_fn", res);
          let data = res.data.djRadios.slice(0, 5);
          this.$store.commit("select_nchor_type_title_data", data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 音乐故事
    music_story_fn() {
      this.axios({
        method: "get",
        url: "/dj/radio/hot",
        params: {
          limit: 5,
          cateId: 2,
        },
      })
        .then((res) => {
          console.log("music_story_data", res);
          let data = res.data.djRadios.slice(0, 5);
          this.$store.commit("music_story_data", data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 声音恋人
    voice_lover_fn() {
      this.axios({
        method: "get",
        url: "/dj/radio/hot",
        params: {
          limit: 5,
          cateId: 3001,
        },
      })
        .then((res) => {
          console.log("voice_lover_data", res);
          let data = res.data.djRadios.slice(0, 5);
          this.$store.commit("voice_lover_data", data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 选择  创作翻唱  音乐故事   声音恋人里面的电台
    select_acchor(item) {
      this.axios({
        method: "get",
        url: "/dj/detail",
        params: {
          rid: item.id,
        },
      })
        .then((res) => {
          res.data.data.desc = res.data.data.desc.split("\n");
          this.$router.push({ name: "SelectAcchor" });
          this.$store.commit("select_acchor_data", res.data.data);
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 选择歌单跳转至歌单详情
    select_song(id) {
      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id,
        },
      })
        .then((res) => {
          // 将图片换成Select组件想要的键名
          res.data.playlist.picUrl = res.data.playlist.coverImgUrl;
          // 将收藏数量换成Select组件想要的名字
          res.data.playlist.subCount = res.data.playlist.subscribedCount;
          // 将标签成我们需要的格式
          let tags = [];
          res.data.playlist.tags.forEach((v) => {
            tags.push(v, "/");
          });
          // 删除最后一个斜杆
          tags.pop();

          // 将修改好格式的数据传回去
          res.data.playlist.tags = tags;
          // 将简介转换成Select组件需要的名字
          res.data.playlist.desc = res.data.playlist.description.split("\n");
          let subCount = String(res.data.playlist.subCount);
          if (subCount.length > 4) {
            res.data.playlist.subCount =
              subCount.slice(0, subCount.length - 4) + "万";
          }
          let shareCount = String(res.data.playlist.shareCount);
          if (shareCount.length > 4) {
            res.data.playlist.shareCount =
              shareCount.slice(0, shareCount.length - 4) + "万";
          }

          res.data.playlist.gd = "gd";

          res.data.playlist.desc.unshift("简介");
          this.$store.commit("select_acchor_data", res.data.playlist);
          console.log(res.data.playlist);
          this.$router.push({ name: "Songdetails" });
          return;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 排行榜页面的 飙升榜的接口/toplist/detail
    top_list_top() {
      this.axios({
        method: "get",
        url: "/toplist/detail",
      })
        .then((res) => {
          console.log("我是飙升榜的数据", res);
          this.get_data();
          this.$store.commit("get_toplist_img", res.data.list[0]);
          this.$store.commit("get_toplist_img2", res.data.list[1]);
          this.$store.commit("get_toplist_img3", res.data.list[2]);
          this.$store.commit("get_toplist_img4", res.data.list[3]);
        })
        .catch((err) => {
          console.log("我是飙升版的错误", err);
        });
    },

    get_data() {
      this.get_toplist_music1();
      this.get_toplist_music2();
      this.get_toplist_music3();
      this.get_toplist_music4();
    },
    // 跟 top_list_top() 配合 拿到飙升榜数据
    get_toplist_music1() {
      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id: 19723756,
        },
      })
        .then((res) => {
          // 截取前五条数据

          res.data.playlist.tracks.forEach((v) => {
            let ar = [];
            v.ar.forEach((v2) => {
              ar.push(v2, { name: "/" });
            });
            ar.pop();
            v.ar = ar;
          });

          let data = res.data.playlist.tracks.splice(0, 5);
          console.log(data);
          // 飙升榜的数据
          this.$store.commit("get_toplist_music1", data);

          console.log("我是飙升榜的数据的id", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跟 top_list_top() 配合 拿到新歌榜数据
    get_toplist_music2() {
      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id: 3779629,
        },
      })
        .then((res) => {
          // 截取前五条数据

          res.data.playlist.tracks.forEach((v) => {
            let ar = [];
            v.ar.forEach((v2) => {
              ar.push(v2, { name: "/" });
            });
            ar.pop();
            v.ar = ar;
          });

          let data = res.data.playlist.tracks.splice(0, 5);
          // 飙升榜的数据
          this.$store.commit("get_toplist_music2", data);

          console.log("我是飙升榜的数据的id", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跟 top_list_top() 配合 拿到原创榜数据
    get_toplist_music3() {
      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id: 2884035,
        },
      })
        .then((res) => {
          // 截取前五条数据

          res.data.playlist.tracks.forEach((v) => {
            let ar = [];
            v.ar.forEach((v2) => {
              ar.push(v2, { name: "/" });
            });
            ar.pop();
            v.ar = ar;
          });

          let data = res.data.playlist.tracks.splice(0, 5);
          console.log(data);
          // 飙升榜的数据
          this.$store.commit("get_toplist_music3", data);

          console.log("我是飙升榜的数据的id", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跟 top_list_top() 配合 拿到热歌榜数据
    get_toplist_music4() {
      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id: 3778678,
        },
      })
        .then((res) => {
          // 截取前五条数据

          res.data.playlist.tracks.forEach((v) => {
            let ar = [];
            v.ar.forEach((v2) => {
              ar.push(v2, { name: "/" });
            });
            ar.pop();
            v.ar = ar;
          });

          let data = res.data.playlist.tracks.splice(0, 5);
          console.log(data);
          // 飙升榜的数据
          this.$store.commit("get_toplist_music4", data);

          console.log("我是飙升榜的数据的id", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 1. 没有a参数的情况下, 跳转至详情
    // 2. 有a参数的情况下, 点击  歌单 排行榜  电台 不会跳转值
    // a用来判断是否从外部点击了全部播放的按钮
    // 点击查看全部  查看榜单  点击
    select_toplist(item, a) {
      console.log(item);
      item.picUrl = item.coverImgUrl;
      item.subCount = item.subscribedCount;
      item.shareCount = 0;
      item.desc = item.description.split("\n");
      item.leixing = "phb";

      let subCount = String(item.subCount);
      if (subCount.length > 4) {
        item.subCount = subCount.slice(0, subCount.length - 4) + "万";
      }
      this.$store.commit("select_acchor_data", item);
      if (!a) {
        this.$router.push({ name: "Songdetails" });
        return;
      }

      // 如果到这里没有跳转至音乐列表  说明点击了外部的播放按钮   执行全部播放的方法
      this.phb_play_music_all();
    },

    // 点击排行榜前五音乐播放
    // 点击歌单列表  进行播放
    play_music(item) {
      let play_info = {
        picUrl: "",
        name: "",
        playTime: "",
        song: {
          alias: [],
          artists: [{ name: "" }],
        },
        id: "",
        type: "music",
      };
      //   图片路劲
      play_info.picUrl = item.al.picUrl;
      //   音乐名称层
      play_info.name = item.name;
      //   播放时间
      play_info.playTime = item.playtime;
      //   播放时间  毫秒形式
      play_info.playTimeS = item.dt;
      //
      play_info.song.alias = "";
      //   歌手名称
      play_info.song.artists[0].name = item.ar[0].name;
      //   音乐的id
      play_info.id = item.id;

      this.$store.commit("musis_info", play_info);
      this.$store.commit("play_list", play_info);
      this.$store.commit("src_id", play_info.id);
      this.$store.dispatch("get_src");

      console.log("item", item);
      console.log(this.$store.state.musis_info);
    },

    // 全球榜, 获取所用榜单 /toplist
    all_toplist_data_fn() {
      this.axios({
        method: "get",
        url: "/toplist",
      })
        .then((res) => {
          res.data.list.splice(0, 4);
          // 遍历数组 将播放量转成   10000 ===> 1万
          res.data.list.forEach((v) => {
            if ((v.playCount + "").length >= 4) {
              v.playCount = v.playCount + "";
              v.playCount = v.playCount.slice(0, v.playCount.length - 4) + "万";
            }
          });
          // 将数据发送给vuex
          this.$store.commit("all_toplist_data", res.data.list);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 排行榜点击中间图标的播放按钮 播放该排行榜的全部音乐
    phb_play_music_all() {
      console.log("222");

      this.axios({
        method: "get",
        url: "/playlist/detail",
        params: {
          id: this.$store.state.select_acchor_data.id,
        },
      })
        .then((res) => {
          console.log("我是飙升榜的数据的id", res);

          for (let i = 0; i < res.data.playlist.tracks.length; i++) {
            res.data.playlist.tracks[i].playtime = this.hms(
              res.data.playlist.tracks[i].dt
            );
          }

          for (let i = 0; i < res.data.playlist.tracks.length; i++) {
            let play_info = {
              picUrl: "",
              name: "",
              playTime: "",
              song: {
                alias: [],
                artists: [{ name: "" }],
              },
              id: "",
              type: "music",
            };
            //   图片路劲
            play_info.picUrl = res.data.playlist.tracks[i].al.picUrl;
            //   音乐名称层
            play_info.name = res.data.playlist.tracks[i].name;
            //   播放时间
            play_info.playTime = res.data.playlist.tracks[i].playtime;
            //   播放时间  毫秒形式
            play_info.playTimeS = res.data.playlist.tracks[i].dt;
            //
            play_info.song.alias = "";
            //   歌手名称
            play_info.song.artists[0].name =
              res.data.playlist.tracks[i].ar[0].name;
            //   音乐的id
            play_info.id = res.data.playlist.tracks[i].id;
            this.$store.commit("play_list", play_info);
            if (i == 0) {
              this.$store.commit("musis_info", play_info);
              this.$store.commit("src_id", play_info.id);
              this.$store.dispatch("get_src");
            }
          }
          // this.$store.commit("song_music_list", res.data.playlist.tracks);
          console.log(res);
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    select_class_singer_fn(active_singers2, cat) {
      console.log(cat);
      this.$store.commit("active_singers2", active_singers2);
      this.$store.commit("active_singers2_cat", cat);

      this.singer_data_fn();
    },
    select_screening_singer_fn(active_singers3, item) {
      console.log(item);
      this.$store.commit("active_singers3", active_singers3);
      this.$store.commit("select_screening_initial", item);

      console.log(item);
      this.singer_data_fn();
    },

    // 拿到全部歌手
    singer_data_fn() {
      this.loading = true;
      if (this.$store.state.select_screening_initial === "全部") {
        this.$store.commit("offset_singer1", 0);
        this.$store.commit("select_screening_initial", "");
      }
      if (this.$store.state.active_singers2_cat) {
        this.$store.commit("offset_singer1", 0);
      }
      this.axios({
        method: "get",
        url: "/artist/list",
        params: {
          cat: this.$store.state.active_singers2_cat,
          initial: this.$store.state.select_screening_initial,
          limit: this.limit_singer,
          offset: this.$store.state.offset_singer,
        },
      })
        .then((res) => {
          this.loading = false;
          console.log(res);
          this.$store.commit("singer_data", res.data.artists);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 滚动加载
    singer_data_fn_scroll_fn() {
      console.log("我触发了没有");
      if (!(this.$store.state.activeName === "singer")) {
        console.log("我触发了没有");
        return;
      }
      console.log(this.$store.state.offset_singer);
      if (this.$store.state.offset_singer === 1) {
        this.loading = true;
      }
      if (this.$store.state.offset_singer === 0) {
        this.$store.commit("offset_singer3", this.$store.state.offset_singer);
        console.log("来了来了");
      }

      this.axios({
        method: "get",
        url: "/artist/list",
        params: {
          cat: this.$store.state.active_singers2_cat,
          initial: this.$store.state.select_screening_initial,
          limit: this.limit_singer,
          offset: (this.$store.state.offset_singer - 1) * this.limit_singer,
        },
      })
        .then((res) => {
          console.log(this.$store.state.offset_singer);
          console.log(res);
          this.loading = false;
          if (this.$store.state.offset_singer === 1) {
          }
          this.$store.commit("singer_data2", res.data.artists);

          // this.offset_singer++;
          this.$store.commit("offset_singer2", this.$store.state.offset_singer);
        })
        .catch((err) => {
          console.log(err);
        });
      console.log("222");
    },

    // 跳转只歌手详情
    gosingerDetails(item) {
      console.log(item);
      console.log("我要去歌手详情页");
      this.$store.commit("singer_info", item);
      this.$router.push({ name: "SingerDetails" });
    },

    // /top/song   新歌速递
    top_song_tab_data_fn(index, type, index2) {
      index = index || 0;
      type = type || 0;
      this.loading = true;
      this.$store.commit("select_top_song_tab", index);
      this.axios({
        method: "get",
        url: "/top/song",
        params: {
          type,
        },
      })
        .then((res) => {
          console.log("我是音乐速递的", res);

          res.data.data.forEach((v) => {
            // console.log(v);
            v.bMusic.playTime = this.hms(v.bMusic.playTime);
            let arr = [];
            v.artists.forEach((v2) => {
              arr.push(v2, { name: "/" });
            });
            arr.pop();
            v.artists = arr;
            setTimeout(() => {
              this.loading = false;
            }, 1000);
          });
          this.$store.commit("top_song_new", res.data.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 点击新歌速递的音乐开始播放
    play_top_song(item) {
      console.log(item);
      let play_info = {
        picUrl: "",
        name: "",
        playTime: "",
        song: {
          alias: [],
          artists: [{ name: "" }],
        },
        id: "",
        type: "music",
        url: "",
      };
      //   图片路劲
      play_info.picUrl = item.album.picUrl;
      //   音乐名称层
      play_info.name = item.name;
      //   播放时间
      play_info.playTime = item.bMusic.playTime;
      //   播放时间  毫秒形式
      // play_info.playTimeS = item.dt;
      //
      play_info.song.alias = "";
      //   歌手名称
      play_info.song.artists[0].name = item.artists[0].name;
      //   音乐的id
      play_info.id = item.id;

      this.$store.commit("musis_info", play_info);
      this.$store.commit("play_list", play_info);
      this.$store.commit("src_id", play_info.id);
      this.$store.dispatch("get_src");

      console.log("item", item);
      console.log(this.$store.state.musis_info);
    },

    // 切换新碟上架  /top/album
    top_song_tab_zj_fn() {
      this.loading1 = true;
      this.axios({
        method: "get",
        url: "/top/album",
        params: {
        },
      })
        .then((res) => {
          console.log(res);

          let weekData = res.data.weekData.splice(0,30);
          this.$store.commit("week_album_songs",weekData);
          this.$store.commit("mounth_album_songs", res.data.monthData);
          console.log("333");
          setTimeout(() => {
            console.log("222");
            this.loading1 = false;
          }, 1000);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 选择新歌速递  或者  新碟上架
    select_song_zj_fn(index) {
      index = index || 0;
      this.$store.commit("album_songs", index);
      // this.loading = true;
      if (index === 0) {
        this.top_song_tab_data_fn();
      } else {
        this.top_song_tab_zj_fn();
      }
    },

    // 点击全部播放
    play_all_music(item) {
      if(!item){
        return
      }
      console.log(item);
      let len = this.$store.state.play_list.length;
      item.forEach((v) => {
        let play_info = {
          picUrl: "",
          name: "",
          playTime: "",
          song: {
            alias: [],
            artists: [{ name: "" }],
          },
          id: "",
          type: "singer_music",
        };
        // 图片
        play_info.picUrl = v.album.picUrl;
        //   音乐名称层
        play_info.name = v.name;
        //   播放时间
        play_info.playTime = v.bMusic.playTime;
        //   播放时间  毫秒形式
        // play_info.playTimeS = v.dt;
        //
        // play_info.song.alias = "";
        //   歌手名称
        play_info.song.artists[0].name = v.artists[0].name;
        //   音乐的id
        play_info.id = v.id;

        this.$store.commit("play_list", play_info);
      });
      if (this.$store.state.play_list[len]) {
        this.$store.commit("src_id", this.$store.state.play_list[len].id);
        this.$store.commit("musis_info", this.$store.state.play_list[len]);
        this.$store.dispatch("get_src");
      } else {
        return;
      }
    },


    // 格式化时间
    hms(times) {
      let t = "";
      let m =
        Math.floor(times / 1000 / 60) < 10
          ? "0" + Math.floor(times / 1000 / 60)
          : Math.floor(times / 1000 / 60);
      let s =
        Math.floor((times / 1000) % 60) < 10
          ? "0" + Math.floor((times / 1000) % 60)
          : Math.floor((times / 1000) % 60);
      t = `${m}:${s}`;
      return t;
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../assets/css/find_music.less");
</style>